<template>

  <div class="ordersList">

    <div class="content">


      <el-row>
        <div class="debug">{{vm.query}}{{vm.meta}}</div>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item>货源列表</el-breadcrumb-item>

        </el-breadcrumb>

      </el-row>

      <el-row :gutter="12">
        <!--todo 响应式-->
        <el-col :span="8">
          <el-select style="width:100px" size="small" v-model="vm.query.is_shelf_off" @change="query"
                     placeholder="上架状态">
            <el-option label="全部状态" value=""></el-option>
            <el-option label="上架" value="0"></el-option>
            <el-option label="下架" value="1"></el-option>

          </el-select>

          <el-dropdown size="small" split-button type="primary" @command="handleMuti">
            <span class="el-dropdown-link">
              批量操作
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="publish">上架</el-dropdown-item>
              <el-dropdown-item command="unpublish">下架</el-dropdown-item>
              <el-dropdown-item command="del" divided>删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>

          <el-button size="small" type="success" @click="dialogUploadVisible = true">管理全网货源</el-button>
          <el-dialog :visible.sync="dialogUploadVisible">

            <upload @uploadSuccess="query({reload:true}),dialogUploadVisible = false"></upload>
            <hr color="#f2f2f2" style="margin: 20px 0px 30px;">
            <p>记录库存的Excel要需要遵循下列格式要求：
            </p>
            <p> 1、每行一条库存记录，第一行为标题行；</p>
            <p> 2、每行按顺序呈现字段：店铺ID（店长电话）、品牌、车系、车型、年款、规格、库存量、批发价、发票额；</p>


            <div slot="footer" class="dialog-footer">


              <el-button size="small" @click="dialogUploadVisible = false">取 消</el-button>
            </div>
          </el-dialog>


        </el-col>
        <el-col :span="8" :offset="8">
          <el-input
            size="small"
            placeholder="输入关键词"
            v-model="vm.query.keyword"
            prefix-icon="el-icon-search"
            @change="query({reload:true})"
            class="input-with-select">
            <el-button
              size="small"

              @click="vm.query.keyword='',query({reload:true})"
              slot="append"
            >清除
            </el-button>

          </el-input>
        </el-col>
        <!--<el-col :span="8" :offset="5">-->
        <!---->


        <!--</el-col>-->
      </el-row>
      <div v-if="vm.isLoading">
        <div class="mt-loading"><i class="el-icon-loading"></i>
        </div>
      </div>

      <el-table
        ref="multipleTable"
        @selection-change="handleSelectionChange"
        v-if="!vm.isLoading"
        :data="vm.models" stripe border style="width: 100%">

        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          prop="id"
          label="#"
          width="60">
        </el-table-column>
        <el-table-column

          label="车型"
        >
          <template slot-scope="scope">
            <!--<router-link :to="{ name:'suppliesEdit',params: { id: scope.row.id }}" append>-->
            <!--<a style="color: #3a70dd;text-underline: none">-->
            {{scope.row.model_name}}
            <!--</a>-->
            <!--</router-link>-->
          </template>
        </el-table-column>
        <el-table-column
          prop="model_info"
          label="外观/内饰"
        >

        </el-table-column>
        <el-table-column
          prop="price"
          label="批发价"
        >


        </el-table-column>
        <el-table-column
          label="市场价"
          width="80"
        >
          <template slot-scope="scope">

            <el-popover
              ref="pricepop"
              placement="bottom"
              title="市场价:"
              @show="showMarketPrice(scope.row)"
              width="200"
              trigger="click"
              :content='vm.market_price'>
            </el-popover>

            <el-button type="text" size="mini" v-popover:pricepop>查看</el-button>

          </template>
        </el-table-column>
        <el-table-column
          label="发票"
          width="80"
        >
          <template slot-scope="scope">

            <div v-if="scope.row.invoice_type=='ZZP'">增票</div>
            <div v-if="scope.row.invoice_type=='LHP'">直票</div>

          </template>
        </el-table-column>
        <el-table-column
          prop="city"
          label="货源地"
        >
        </el-table-column>

        <el-table-column
          prop="sales_area"
          label="销售区域"
        >
        </el-table-column>

        <el-table-column
          prop="shop_name"
          label="店铺名称"
        >
        </el-table-column>
        <el-table-column
          width="80"
          label="状态"
        >
          <template slot-scope="scope">

            <el-tag v-if="scope.row.is_shelf_off==0" type="success">上架</el-tag>


            <el-tag type="info" v-else>
              下架
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="上架时间"
        >
          <template slot-scope="scope">

            {{scope.row.create_time | moment("from", "now")}}
          </template>
        </el-table-column>
        <!--<el-table-column-->
          <!--align="right"-->
          <!--label="操作"-->
          <!--&gt;-->
          <!--<template slot-scope="scope">-->

            <!--<router-link :to="{ name:'suppliesEdit',params: { id: scope.row.id }}" append>-->
              <!--<el-button size="mini">-->

                <!--详情-->
              <!--</el-button>-->
            <!--</router-link>-->


          <!--</template>-->
        <!--</el-table-column>-->
      </el-table>
      <el-pagination
        background
        v-if="!vm.isLoading"
        @size-change="sizeChange($event)"
        @current-change="pageChange($event)"
        :page-size="vm.meta.size"
        :page-sizes="[10,20,30,50,100,1000]"
        :current-page="vm.meta.page"
        layout="total,sizes,prev, pager, next,jumper"
        :total="vm.meta.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue'
  import * as Models from '@/api/supplies'
  // import Citys from '@/api/citys'
  import upload from '@/components/Upload'

  import pages from '@/mixins/pages'
  export default{
    name: "staffList",
    mixins: [pages],
    components: {
      upload
    },
    data(){
      return{
        vm:{
          models:[],
          isNull:false,
          isLoading:false,
          isError:false,
          meta:{},
          query: {},
          market_price: ''
        },
        dialogUploadVisible: false,
        visibleDel: false,
        citys: {},
        multipleSelection: [],
        Models
      }
    },
    computed:{},
    mounted() {
      this.query.is_shelf_off = '',
        this.query({reload:true})

    },

    methods: {
      showMarketPrice(scope) {

        this.vm.market_price = `请求中`;

        Models.marketPrice({
          model_id: scope.model_id,
          city: scope.city
        }).then((res) => {
          this.vm.market_price = `${res.market_price}元`;
        }).catch((err) => {
          this.vm.market_price = err
        });

      },
      mutiDel() {
        this.$confirm("是否进行多项操作", "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {

          Models.mutiDel(this.getIds(this.multipleSelection))
            .then(res => {
              this.query();
              this.$message.success("删除成功")
            })
        })

      },
      mutiPublish(code) {
        this.$confirm("是否进行多项操作", "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          Models.mutiPublish(this.getIds(this.multipleSelection), code)
            .then(res => {
              this.query();
              this.$message.success("修改成功")
            })
        });

      },
      handleMuti(name) {
        switch (name) {
          case 'publish':
            this.mutiPublish(0);
            break;
          case 'unpublish':
            this.mutiPublish(1);
            break;
          case 'del':
            this.mutiDel();
            break;
        }
      },


    }

  }
</script>
